<template>
  <div class="app-container documentation-container">
    <el-row :gutter="20">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="扬尘类型" prop="status">
          <el-select
              v-model="queryParams.reportType"
              placeholder="扬尘类型"
              clearable
              size="small"
              style="width: 180px"
              @change="queryParams.page=1"
          >
            <el-option
                v-for="dict in dustOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提交人" prop="roleKey">
          <el-input
              v-model="queryParams.reporter"
              placeholder="请输入提交人姓名"
              clearable
              size="small"
              style="width: 150px"
              @keyup.enter.native="dustReportList"
          />
        </el-form-item>
        <el-form-item label="行政区域">
          <el-cascader clearable
                       size="small"
                       v-model="areaValue"
                       :options="cities"
                       :props="props"
                       style="width: 150px"></el-cascader>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-select
              v-model="queryParams.approvalOpinions"
              placeholder="审批意见"
              clearable
              size="small"
              style="width: 150px"
              @change="queryParams.page=1"
          >
            <el-option
                v-for="dict in approvalOpinions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否反馈">
          <el-select
              v-model="queryParams.reportStatus"
              placeholder="是否反馈"
              clearable
              size="small"
              style="width: 100px"
              @change="queryParams.page=1"
          >
            <el-option
                v-for="dict in reportStatusOpinions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker style="width: 285px"
                          v-model="queryParams.createdDate"
                          :default-time="['00:00:00','23:59:59']"
                          type="daterange"
                          range-separator="-"
                          size="small"
                          class="date-item"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
          />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="dustReportList">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20">
      <el-table :data="tableData" border style="width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="no" label="事件编号" width="180"></el-table-column>
        <el-table-column align="center" prop="reportType" width="400" label="扬尘类型">
          <template slot-scope="scope">
            <span>{{ scope.row.reportType | opinionsFilter(dustOptions) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reporter" width="100" label="提交人"></el-table-column>
        <el-table-column align="center" prop="phoneNumber" width="180" label="电话"></el-table-column>
        <el-table-column align="center" prop="divisionName" width="150" label="行政区域">
          <template slot-scope="scope">
            <span>{{ scope.row.city + "/" + scope.row.county }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="approvalOpinions" width="100" label="审批意见">
          <template slot-scope="scope">
            <span>{{ scope.row.approvalOpinions | opinionsFilter(approvalOpinions) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reportStatus" width="80" label="是否反馈">
          <template slot-scope="scope">
            <span :style="scope.row.reportStatus==='1'?{'color':'green'}:{'color':'red'}" class="green-class">{{
                scope.row.reportStatus | opinionsFilter(reportStatusOpinions)
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createdDate" width="230">
          <template slot-scope="scope">
            <span>{{ localDateTimeFormatter(scope.row.createdDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-search" @click="toInfoEdit(scope.row)">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getData"/>
  </div>
</template>

<script>
import {getDustReportList, exportDustReport} from "@/api/weixin/dustReport"
import {treeselect} from "@/api/regionCode";
import {exportRole} from "@/api/system/role";
import {download} from "@/utils";

export default {
  name: 'Documentation',

  data() {
    return {
      // 数据总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        size: 10,
        // 上报类型
        reportType: '',
        //上报时间
        createdDate: null,
        // 城市
        cityCode: "",
        //区县
        countyCode: "",
        // 审批意见
        approvalOpinions: "",
        // 是否反馈
        reportStatus: "",
      },
      props: {
        value: 'regionCode',
        label: 'regionName',
        children: 'children'
      },
      // 城市级联
      areaValue: undefined,
      // 数据
      tableData: [],
      // 上报分类
      dustOptions: [],
      //审批意见
      approvalOpinions: [],
      // 行政区划
      cities: [],
      // 是否审批
      reportStatusOpinions: [],

    }
  },
  created() {
    this.getDicts("sys_dust_type").then(response => {
      this.dustOptions = response.data;
    });

    this.getDicts("sys_approval_opinions").then(response => {
      this.approvalOpinions = response.data;
    });
    this.getDicts("sys_dust_type").then(response => {
      this.dustOptions = response.data;
    });

    this.getDicts("report_status_opinions").then(response => {
      this.reportStatusOpinions = response.data;
    });
    this.treeselect();
  },
  mounted() {
    this.dustReportList();
  },

  methods: {
    dustReportList() {
      this.queryParams.page = 1;
      if (this.areaValue != undefined) {
        let areaValue = this.areaValue;
        this.queryParams.cityCode = areaValue[0]
        this.queryParams.countyCode = areaValue[1]
        debugger
      }
      this.getData();
    },

    getData() {
      getDustReportList(this.queryParams).then(res => {
        const {content, totalElements} = res.data;
        this.tableData = content
        this.total = totalElements
        debugger
      }).catch(err => {

      })
    },
    treeselect() {
      treeselect().then(res => {
        this.cities = res.data;
      }).catch(err => {

      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        exportDustReport(queryParams).then(response => {
          debugger
          download(response.data);
        });
      }).catch(function () {
      });
    },
    toInfoEdit(row) {
      this.$router.push(`/eventManagement/infoEdit/` + row.id)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
